<template>
    <div class="logistics page">
        <div class="top">
            <div class="return" @click="back">
                <img src="./image/return.png" alt="">
            </div>
            <div class="title">物流进度</div>
            <div class="seat"></div>
        </div>
        <div class="con" v-if="log">
            <div class="info">
                <div class="img">
                    <img :src="log.logo"/>
                </div>
                <div class="msg">
                    <div class="name">{{name}}</div>
                    <div class="desc">{{log.expName}}:{{logNo}}</div>
                </div>
            </div>
            <div class="trans">
                <ul>
                    <li class="right" v-for="(item,index) in logData" :key="index">
                        <img src="./image/org.png">
                        <div class="word">
                            <span class="status">{{item.status}}</span>
                            <span class="transCon"></span>
                        </div>
                        <div class="time">{{item.time}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {getLogistics} from '@/api/order'
    export default {
        name: "logistics",
        data(){
            return{
                logNo:null,
                logData:[],
                log:null,
                name:''
            }
        },
        activated() {
            this.logNo=this.$route.query.logNo
            getLogistics(this.logNo).then(res=>{
                console.log(res)
                this.logData = res.data.list
                this.log = res.data
                this.name = res.extra.name
            })
        },
        methods:{
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="stylus">
.logistics
    background $page-bg
    .top
        position fixed
        top 0
        width calc(100% - 36px)
        padding 0 18px
        height 44px
        display flex
        color #333333
        font-size 18px
        justify-content space-between
        align-items center
        background-color #fff
        .return
            img
                width: 10px
                height: 18px
        .seat
            width: 10px
            height: 18px
    .con
        margin-top 44px
        .info
            background-color #fff
            padding 10px 15px
            display flex
            .img
                width: 50px
                height: 50px
                img
                    width: 50px
                    height: 50px
            .msg
                color #333
                margin-left 5px
                .name
                    font-size 15px
                    line-height 18px
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    width 250px
                .desc
                    font-size 10px
                    line-height 14px
                    margin-top 5px

        .trans
            margin-top 10px
            background-color #fff
            padding 15px 23px
            ul
                li
                    position relative
                    img
                        width: 16px
                        height: 16px
                        position absolute
                        top 5px
                        left -8px
                .right
                    padding-left 13px
                    padding-bottom 15px
                    color #333
                    border-left 1px solid #979797
                    .word
                        line-height 20px
                    .status
                        font-size 14px
                        margin-right 5px
                    .transCon
                        font-size 12px
                    .time,.per
                        line-height 14px
                        color #666666
                        font-size 10px
                        margin-top 2px


</style>